/*
 * 用户数据大盘
 * @Author: along
 * @Date: 2020-03-31
 */
<template>
    <div class="student">
        <div
            class="student-home"
            v-if="true"
        >
            <div
                class="main-content"
                v-if="type"
            >
                <p class="main-content-title">数据展示</p>
                <div class="main-content-right">
                    <el-date-picker
                        v-model="user_filter.date"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']"
                        size="small"
                        @change="fnChangeDate()"
                    />
                </div>
            </div>
            <div
                class="main-content"
                v-if="!type"
            >
                <p class="main-content-title">数据展示</p>
                <div class="main-content-right">
                    <el-date-picker
                        v-model="user_filter.date"
                        type="datetime"
                        placeholder="选择日期时间"
                        @change="fnChangeDate()"
                        size="small"
                    />
                </div>
            </div>
            <div class="main-seat" />
            <!-- 列表字段渲染 -->
            <div
                class="zd-data"
                :class="'zd-data' + number"
            >
                <div
                    class="zd-list"
                    v-for="(item,index) in number"
                    :key="index"
                >
                    <div class="zd-head">
                        <p class="zd-head-title">{{ title[index] }}</p>
                    </div>
                    <!-- 总用户大盘/新增用户大盘 -->
                    <div
                        class="zd-content"
                        v-if="number == 1"
                    >
                        {{ userCount.field ? userCount.field[index] : '--' }}
                    </div>
                    <!-- 访问用户大盘 -->
                    <div
                        class="zd-content"
                        v-if="number == 2"
                    >
                        <span v-if="index == 0">
                            {{ userCount.field ? userCount.field[index] : '--' }}
                        </span>
                        <p v-if="index == 1">
                            {{ userCount.field ? (userCount.field[index + 1] + ' / ' + userCount.field[index]) : '--' }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            //
        };
    },
    props: {
        //筛选字段
        user_filter: {
            type: Object,
            default: ()=>{}
        },
        //筛选字段
        dateList: {
            type: Array,
            default: ()=>{}
        },
        //一行几列，最多6
        number: {
            type: Number,
            default: ()=>{}
        },
        //数据
        userCount: {
            type: Object,
            default: ()=>{}
        },
        //标题,数组
        title: {
            type: Array,
            default: ()=>{}
        },
        //是否显示时间段筛选
        isFilter:{
            type: Boolean,
            default: ()=>{}
        },
        //选择器类型
        type:{
            type: Boolean,
            default: ()=>{}
        }
    },
    methods:{
        fnChangeDate () {
            this.$emit('change');
        }
    }
};
</script>

<style lang="less" scoped>
    .container {
        background-color: #F4F4F4;
        padding: 0 15px 5px 15px;
        display: flex;
        flex-direction: column;
        position: relative;
        width: 100%;
        height: 100%;
        /* 字体高亮 */
        .cursor-font {
            color: rgb(64, 158, 255);
            cursor: pointer;
        }
        /* 分页 */
        .pagination-wrapper {
            padding-top: 10px;
            padding-bottom: 10px;
            .el-pagination {
                float: right;
                padding: 0;
                background-color: transparent;
            }
        }
    }
    /* 学习首页指标 */
    .student {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: auto;
    }
    .student-home {
        width: 100%;
        display: flex;
        flex-direction: column;
        background: #ffffff;
        padding: 12px 15px 30px 15px;
        margin-bottom: 10px;
        .main-content {
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 9px;
            &-title {
                color: #000000;
                font-size: 14px;
            }
        }
        .main-seat {
            width: 100%;
            height: 1px;
            background: #F4F4F4;
            margin-bottom: 35px;
        }
    }
    .main {
        width: 100%;
        display: flex;
    }
    .main-flow {
        width: calc(100% / 2);
        padding: 12px 15px 25px 15px;
        box-sizing: border-box;
        background: #ffffff;
        .main-content {
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 9px;
            &-title {
                color: #000000;
                font-size: 14px;
            }
        }
        .main-seat {
            width: 100%;
            height: 1px;
            background: #F4F4F4;
            margin-bottom: 15px;
        }
    }
    .main-flow-banner {
        width: 100%;
    }
    .main-funnel {
        width: calc((100% - 10px) / 2);
        padding: 12px 15px 30px 15px;
        box-sizing: border-box;
        background: #ffffff;
        margin-left: 10px;
        .main-content {
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 9px;
            &-title {
                color: #000000;
                font-size: 14px;
            }
        }
        .main-seat {
            width: 100%;
            height: 1px;
            background: #F4F4F4;
            margin-bottom: 30px;
        }
        .main-funnel-cont {
            padding: 30px 100px 30px 101px;
            display: flex;
            height: 132px;
            align-items: center;
            justify-content: center;
            .main-cont-list {
                display: flex;
                flex-direction: column;
                align-items: center;
                .main-list-title {
                    color: #000000;
                    font-size: 14px;
                    height: 22px;
                    line-height: 22px;
                    margin-bottom: 10px;
                    white-space: nowrap;
                }
                .main-list-cont {
                    width: 80px;
                    height: 80px;
                    border-radius: 50%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    background: #81DFEA;
                    .main-list-ratio {
                        height: 40px;
                        line-height: 40px;
                        color: #ffffff;
                        font-size: 24px;
                        margin-top: 9px;
                        font-weight: 500;
                    }
                    .main-list-number {
                        height: 22px;
                        line-height: 22px;
                        color: #ffffff;
                        font-size: 14px;
                    }
                }
                .blue {
                    background: #81A8EA;
                }
                .green {
                    background: #64B76D;
                }
                .orig {
                    background: #EAAC50;
                }
                .red {
                    background: #FF7470;
                }
            }
            .main-cont-arrow {
                display: flex;
                height: 100%;
                width: 35px;
                justify-content: center;
                .main-arrow-list {
                    display: flex;
                    height: 13px;
                    align-items: center;
                    margin: 48px 6px 0 8px;
                    .main-arrow-line {
                        width: 20px;
                        height: 1px;
                        background: #D8D8D8;
                    }
                    .main-arrow-delta {
                        width: 0px;
                        height: 0px;
                        border-width: 5px;
                        border-style: solid;
                        border-color: transparent transparent transparent #D8D8D8;
                    }
                }
            }
        }
    }
    /* 数据展示 */
    .zd-data {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        background: #ffffff;
        .zd-list {
            display: flex;
            flex-direction: column;
            align-items: center;
            .zd-head {
                height: 20px;
                display: flex;
                align-items: center;
                .zd-head-title {
                    font-size: 14px;
                    color: #3F454B;
                }
                .el-button {
                    width:10px;
                    border: none !important;
                    margin: -3px 0 0 -15px !important;
                    background: transparent !important;
                }
                .el-button:hover {
                    background: transparent !important;
                }
            }
            .zd-content {
                height: 38px;
                line-height: 38px;
                color: #1D2023;
                font-size: 22px;
                margin-top: 10px;
            }
        }
    }
    .zd-data1 .zd-list {
        width: calc(100%);
    }
    .zd-data2 .zd-list {
        width: calc(100% / 2);
    }
    .zd-data3 .zd-list {
        width: calc(100% / 3);
    }
    .zd-data4 .zd-list {
        width: calc(100% / 4);
    }
    .zd-data5 .zd-list {
        width: calc(100% / 5);
    }
    .zd-data6 .zd-list {
        width: calc(100% / 6);
    }
    /* 数据图表 */
    .el-dialog-echarts .content_left {
        background: #ffffff;
        width: 100%;
        height: 100%;
        .content_head {
            width: 100%;
            height: 55px;
            border-bottom: 1px #E8E8E8 solid;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            .content_text {
                font-size: 16px;
                font-weight: bold;
                font-weight: bold;
                padding-left: 24px;
            }
        }
        .content_echarts {
            width: 100%;
            height: 297px;
            // border: 1px red solid;
            box-sizing: border-box;
            .echarts {
                width: 100%;
                height: 100%;
            }
        }
    }
    /* 侧边导航栏 */
    .nav {
        width: 50px;
        display: flex;
        flex-direction: column;
        position: fixed;
        right: 27px;
        top: 233px;
        z-index: 999;
        cursor: pointer;
        .nav-cont {
            display: flex;
            flex-direction: column;
            width: 100%;
            transition: all .2s;
            overflow: hidden;
        }
        .nav-list {
            box-shadow:0px -1px 0px 1px rgba(244,244,244,1);
            font-size: 12px;
            color: #88909C;
            width: 50px;
            height: 50px;
            line-height: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            background: #ffffff;
            box-sizing: border-box;
            padding: 0 7px;
            .nav-width {
                width: 25px;
                line-height: 17px;
            }
        }
        .nav-list-cursor {
            background: #20A0FF;
            color: #ffffff;
        }
        .nav-foot {
            box-shadow:0px -1px 0px 1px rgba(244,244,244,1);
            font-size: 12px;
            color: #88909C;
            width: 50px;
            height: 25px;
            line-height: 16px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            background: #ffffff;
            box-sizing: border-box;
            border-bottom: 1px #F4F4F4 solid;
            .el-icon-hand-xiangshang, .el-icon-hand-xiangxia {
                font-size: 16px;
                color: #88909C;
            }
        }
    }
    /* 排序 */
    .sort-wrap {
        display: flex;
        align-items: center;
        cursor: pointer;
        .sort-spliter {
            width: 1px;
            height: 12px;
            background: rgba(235, 235, 235, 1);
            margin: 0 10px;
            }
            .btn-sort {
            font-size: 14px;
            line-height: 1;
            color: #ccc;
            &:hover {
                color: #20a0ff;
            }
        }
    }
</style>
<style lang="less">
    .userDataAnalysis {
        .el-table__body-wrapper .el-table__body .el-table__row td {
            border: none;
        }
        .el-table__header-wrapper .el-table__header .has-gutter tr th {
            border: none;
        }
        .el-table__header-wrapper {
            border: none;
        }
        .el-table .el-table_1_column_6  .cell {
            position: relative;
        }
        .el-range-editor--small .el-range-separator{
            padding: 0 1px !important;
        }
        .el-color{
            color: rgba(0, 0, 0);
            font-weight: bold;
        }
        .has-gutter th .cell {
            color: #3F454B !important;
            font-weight: 400 !important;
        }
    }
</style>